/**
 * 现代化通知系统
 * 替代原生的 alert、confirm、prompt
 */

// ========================================
// 1. Toast 轻提示（替代简单的alert）
// ========================================

function showToast(message, type = 'success', duration = 3000) {
  const toast = document.createElement('div');
  toast.className = `custom-toast toast-${type}`;
  
  const icons = {
    success: '✅',
    error: '❌',
    warning: '⚠️',
    info: 'ℹ️'
  };
  
  toast.innerHTML = `
    <div class="toast-icon">${icons[type] || icons.info}</div>
    <div class="toast-message">${message}</div>
  `;
  
  document.body.appendChild(toast);
  
  // 动画显示
  setTimeout(() => toast.classList.add('show'), 10);
  
  // 自动隐藏
  setTimeout(() => {
    toast.classList.remove('show');
    setTimeout(() => toast.remove(), 300);
  }, duration);
}

// ========================================
// 2. 确认对话框（替代confirm）
// ========================================

function showConfirm(title, message, onConfirm, onCancel) {
  const modal = document.createElement('div');
  modal.className = 'custom-modal';
  modal.innerHTML = `
    <div class="custom-modal-overlay"></div>
    <div class="custom-modal-content custom-confirm">
      <div class="modal-header">
        <h3>${title}</h3>
      </div>
      <div class="modal-body">
        <p>${message}</p>
      </div>
      <div class="modal-footer">
        <button class="btn btn-secondary cancel-btn">取消</button>
        <button class="btn btn-primary confirm-btn">确定</button>
      </div>
    </div>
  `;
  
  document.body.appendChild(modal);
  setTimeout(() => modal.classList.add('show'), 10);
  
  // 确定按钮
  modal.querySelector('.confirm-btn').onclick = () => {
    modal.classList.remove('show');
    setTimeout(() => modal.remove(), 300);
    if (onConfirm) onConfirm();
  };
  
  // 取消按钮
  modal.querySelector('.cancel-btn').onclick = () => {
    modal.classList.remove('show');
    setTimeout(() => modal.remove(), 300);
    if (onCancel) onCancel();
  };
  
  // 点击遮罩关闭
  modal.querySelector('.custom-modal-overlay').onclick = () => {
    modal.classList.remove('show');
    setTimeout(() => modal.remove(), 300);
    if (onCancel) onCancel();
  };
}

// ========================================
// 3. 输入对话框（替代prompt）
// ========================================

function showPrompt(title, placeholder, onSubmit, onCancel) {
  const modal = document.createElement('div');
  modal.className = 'custom-modal';
  modal.innerHTML = `
    <div class="custom-modal-overlay"></div>
    <div class="custom-modal-content custom-prompt">
      <div class="modal-header">
        <h3>${title}</h3>
      </div>
      <div class="modal-body">
        <input type="text" class="prompt-input" placeholder="${placeholder}" autofocus>
      </div>
      <div class="modal-footer">
        <button class="btn btn-secondary cancel-btn">取消</button>
        <button class="btn btn-primary submit-btn">确定</button>
      </div>
    </div>
  `;
  
  document.body.appendChild(modal);
  setTimeout(() => modal.classList.add('show'), 10);
  
  const input = modal.querySelector('.prompt-input');
  
  // 确定按钮
  const submit = () => {
    const value = input.value.trim();
    if (value) {
      modal.classList.remove('show');
      setTimeout(() => modal.remove(), 300);
      if (onSubmit) onSubmit(value);
    } else {
      input.style.borderColor = '#ea4335';
      showToast('请输入内容', 'warning');
    }
  };
  
  modal.querySelector('.submit-btn').onclick = submit;
  input.addEventListener('keypress', (e) => {
    if (e.key === 'Enter') submit();
  });
  
  // 取消按钮
  modal.querySelector('.cancel-btn').onclick = () => {
    modal.classList.remove('show');
    setTimeout(() => modal.remove(), 300);
    if (onCancel) onCancel();
  };
  
  input.focus();
}

// ========================================
// 4. 加载提示（替代loading）
// ========================================

let loadingInstance = null;

function showLoading(message = '加载中...') {
  if (loadingInstance) return;
  
  loadingInstance = document.createElement('div');
  loadingInstance.className = 'custom-loading';
  loadingInstance.innerHTML = `
    <div class="loading-spinner"></div>
    <div class="loading-text">${message}</div>
  `;
  
  document.body.appendChild(loadingInstance);
  setTimeout(() => loadingInstance.classList.add('show'), 10);
}

function hideLoading() {
  if (loadingInstance) {
    loadingInstance.classList.remove('show');
    setTimeout(() => {
      if (loadingInstance) {
        loadingInstance.remove();
        loadingInstance = null;
      }
    }, 300);
  }
}

// ========================================
// 5. 成功动画（用于重要操作）
// ========================================

function showSuccessAnimation(message) {
  const success = document.createElement('div');
  success.className = 'success-animation';
  success.innerHTML = `
    <div class="success-checkmark">
      <svg class="checkmark" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 52 52">
        <circle class="checkmark-circle" cx="26" cy="26" r="25" fill="none"/>
        <path class="checkmark-check" fill="none" d="M14.1 27.2l7.1 7.2 16.7-16.8"/>
      </svg>
    </div>
    <div class="success-text">${message}</div>
  `;
  
  document.body.appendChild(success);
  setTimeout(() => success.classList.add('show'), 10);
  
  setTimeout(() => {
    success.classList.remove('show');
    setTimeout(() => success.remove(), 500);
  }, 2500);
} 